'use client'
import { Loader, OrbitControls, PresentationControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { useRouter } from 'next/navigation'
import styles from "./assemble.module.css"
import { Assemble } from "../../components/Assemble";
import { Suspense, useEffect, useState } from "react";

export default function Page() {
    const router = useRouter()
    const [flag, setFlag] = useState(false)
    const [drag, enableDrag] = useState(false)


    useEffect(() => {

        if (flag) {
            alert("Верно")
        }
    }, [flag])
    return (
        <>
            <button onClick={() => router.back()}>
                Вернуться к теме.
            </button>
            <h1>Собери самолет</h1>
            <p>[ПКМ] для вращения камеры / [ЛКМ] для передвижения деталей</p>

            <div className={styles.container}>
                <Suspense>
                    <Canvas camera={{ position: [-10, 10, 10] }} >
                        <gridHelper args={[100, 100]} />
                        <ambientLight intensity={5} />
                        <Assemble
                            src="/assets/su31.glb"
                            firstPartName="fuselage"
                            onAssembled={setFlag}
                            onDragging={enableDrag} />
                        <OrbitControls
                            enabled={!drag}
                            enablePan={false}
                            makeDefault
                            enableZoom={true}
                            maxPolarAngle={Math.PI / 4}
                            minPolarAngle={Math.PI / 4}
                        />
                    </Canvas>
                </Suspense>
                <Loader />
            </div>
        </>
    )
}